import { FC, useEffect, useRef, useState } from "react";
import CartoonImage from '../../assets/cartoon.jpg'
import FoodImage from '../../assets/food.jpg'
import MovieImage from '../../assets/movie.png'
import LifeImage from '../../assets/life.jpg'
import LogoImage from '../../assets/logo.png'

import style from './style.module.scss'
import classNames from "classnames";

const tabList = [
    {
        key: 'cartoon',
        title: '动画',
        image: CartoonImage
    },
    {
        key: 'food',
        title: '美食',
        image: FoodImage
    },
    {
        key: 'movie',
        title: '电影',
        image: MovieImage
    },
    {
        key: 'life',
        title: '生活',
        image: LifeImage
    },
]

const TAB_HEIGHT = 56;

const SecondSection: FC = () => {
    const [activeTab, setActiveTab] = useState<string>('cartoon')
    const [isFixed, setIsFixed] = useState<boolean>(false)

    const secondSectionRef = useRef<HTMLDivElement>(null)

    const activate = (key: string) => {
        setActiveTab(key)
        const tabContentEl = document.querySelector(`[data-id=${key}]`)

        if (tabContentEl) {
            tabContentEl.scrollIntoView({ behavior: 'smooth' });
        }
    }

    const onScroll = () => {
        if (secondSectionRef.current) {
            const { top } = secondSectionRef.current.getBoundingClientRect();
            setIsFixed(top <= 0);

            const sectionNodes = secondSectionRef.current.querySelectorAll('section')

            Array.from(sectionNodes).forEach(sectionEl => {
                const { top } = sectionEl.getBoundingClientRect();

                const key = sectionEl.getAttribute('data-id') || '';
                if (top <= TAB_HEIGHT+1) {
                    setActiveTab(key);
                }
            })
        }
    }

    useEffect(() => {
        window.addEventListener('scroll', onScroll)

        // 组件销毁时，需要删除监听
        return () => {
            window.removeEventListener('scroll', onScroll)
        }
    }, [])

    return (
        <div className={style.sceondSection} ref={secondSectionRef}>
            <ul className={classNames({ [style.isFixed]: isFixed })}>
                {tabList.map(tab => (
                    <li key={tab.key} onClick={() => { activate(tab.key) }}>
                        <span>{tab.title}</span>
                        <span className={classNames(style.line, { [style.visible]: activeTab === tab.key })}></span>
                        {/* {activeTab === tab.key && <span className={style.line}></span>} */}
                    </li>
                ))}
            </ul>

            <div>
                {tabList.map(tab => (
                    <section key={tab.key} data-id={tab.key}>
                        <h2>{tab.title}</h2>
                        <img src={tab.image} alt={tab.key} />
                    </section>
                ))}
            </div>

            <div className={classNames(style.btnSection,{[style.visible]:isFixed})}>
                <img src={LogoImage} alt="logo" />
                <button>App内打开</button>
            </div>

        </div>
    )
}

export default SecondSection;